<template>
    <div style="margin-bottom:50px">
        <v-toolbar flat color="primary">
           <!-- 上部标题栏 -->
           <v-btn icon flat>
                <v-icon color="white" medium @click="goBack()">keyboard_arrow_left</v-icon>
           </v-btn>
           <v-toolbar-title style="margin-left:0">
               <span style="color:white">公告详情</span>
           </v-toolbar-title>
           
        </v-toolbar>

        <!-- 公告详情 -->
        <v-layout wrap id="details_layout">
            <v-carousel style="height:250px">
                <v-carousel-item
                v-for="(item,i) in news.attachments"
                :key="i"
                :src="item.attachmentUrl"
                ></v-carousel-item>
            </v-carousel>
            <h3 style="margin:5%">{{news.announcementTitle}}</h3>
            <p style="margin-left:5%;margin-right:5%">{{news.announcementContent}}</p>
        
        </v-layout>

        <!-- 回到顶部 -->
       
    </div>      
</template>

<script>

export default {

    name:'news-details',
    
    data(){
        return{
            news:{
                announcementTitle:'',
                announcementContent:'',
                attachments:[],
                
            }
        }
    },

    methods:{

        getNewsDetail(){

             this.$axios({
                method:'get',
                url:this.SERVER+'/announcements/'+this.$route.params.newsID,
                headers:{
                    'Content-Type':'multipart/form-data',
                    'Authorization':'bearer '+localStorage.getItem('Access-Token')
                }
            }).then(response=>{
                    var res=response['data']['data']
                    console.log(res)
                    this.news.announcementTitle=res['announcementTitle']
                    this.news.announcementContent=res['announcementContent']
                    this.news.attachments=res['attachments']
                }
            ),response=>({
                function(response){
                    console.log(response)
                }
            })
        },
        goBack(){
            this.$router.back(-1);
        }
    },

    mounted(){
        this.getNewsDetail();
    }
}
</script>

<style>

    #details_layout{
        margin-left:0;
    }
</style>
